Skip to main content

Bar Chart

Data​

Data Source​

A list of values for the bar chart.

Value​

The value of the bar.

Category​

The category of the bar.

Name​

The name of the series, as shown in the legend and tooltips.

Group​

(optional)

Group of the bar.

Color​

(optional)

Fixed color override of the bar.

ID​

(optional)

ID of the bar used by point selection)

Upper Range​

(optional)

Upper range for the bar shown when stacking of the bars is turned off.

Lower Range​

(optional)

Lower range for the bar shown when stacking of the bars is turned off.

Example of manual entry:

Alternatively the data source can be linked to an SDD.

{
  "version": "1.0.0",
  "sddFormat": "sdd/table/array-of-objects",
  "validation": "enforced",
  "definitions": {
    "ID": {
      "kind": "integer",
      "optional": false
    },
    "date": {
      "kind": "string",
      "optional": false
    },
    "state": {
      "kind": "string",
      "optional": false
    },
    "value": {
      "kind": "integer",
      "optional": false
    },
    "metric": {
      "kind": "string",
      "optional": false
    },
    "state_id": {
      "kind": "string",
      "optional": false
    },
    "epoch_date": {
      "kind": "integer",
      "optional": false
    }
  },
  "data": [
    {
      "ID": 32,
      "date": "16/11/2020",
      "state": "Colorado",
      "value": -9,
      "metric": "Parks",
      "state_id": "08",
      "epoch_date": 1605398400000
    },
    {
      "ID": 33,
      "date": "15/11/2020",
      "state": "Colorado",
      "value": 7,
      "metric": "Residential",
      "state_id": "08",
      "epoch_date": 1605398400000
    },
    {
      "ID": 34,
      "date": "15/11/2020",
      "state": "Colorado",
      "value": -24,
      "metric": "Retail and Recreation",
      "state_id": "08",
      "epoch_date": 1605398400000
    },
    {
      "ID": 35,
      "date": "15/11/2020",
      "state": "Colorado",
      "value": -35,
      "metric": "Transit Stations",
      "state_id": "08",
      "epoch_date": 1605398400000
    },
    {
      "ID": 36,
      "date": "15/11/2020",
      "state": "Colorado",
      "value": -14,
      "metric": "Workplace",
      "state_id": "08",
      "epoch_date": 1605398400000
    },
    {
      "ID": 49,
      "date": "15/11/2020",
      "state": "District of Columbia",
      "value": -25,
      "metric": "Grocery and Pharmacy",
      "state_id": "11",
      "epoch_date": 1605398400000
    },
    {
      "ID": 50,
      "date": "15/11/2020",
      "state": "District of Columbia",
      "value": -35,
      "metric": "Parks",
      "state_id": "11",
      "epoch_date": 1605398400000
    },
    {
      "ID": 51,
      "date": "17/11/2020",
      "state": "District of Columbia",
      "value": 8,
      "metric": "Residential",
      "state_id": "11",
      "epoch_date": 1605398400000
    },
    {
      "ID": 52,
      "date": "17/11/2020",
      "state": "District of Columbia",
      "value": -50,
      "metric": "Retail and Recreation",
      "state_id": "11",
      "epoch_date": 1605398400000
    },
    {
      "ID": 53,
      "date": "17/11/2020",
      "state": "District of Columbia",
      "value": -60,
      "metric": "Transit Stations",
      "state_id": "11",
      "epoch_date": 1605398400000
    },
    {
      "ID": 54,
      "date": "15/11/2020",
      "state": "District of Columbia",
      "value": -25,
      "metric": "Workplace",
      "state_id": "11",
      "epoch_date": 1605398400000
    },
    {
      "ID": 55,
      "date": "17/11/2020",
      "state": "Florida",
      "value": -13,
      "metric": "Grocery and Pharmacy",
      "state_id": "12",
      "epoch_date": 1605398400000
    },
    {
      "ID": 56,
      "date": "15/11/2020",
      "state": "Florida",
      "value": -19,
      "metric": "Parks",
      "state_id": "12",
      "epoch_date": 1605398400000
    }
  ]
}

Aggregation Method​

Component level data aggregation method that determines how should the data be aggregated in case there are more than one values with the same Categorical and Value axis values from the same series.

The available options are:

  • None
  • Sum
  • Count
  • Unique Count
  • Average
  • Median
  • Variance
  • Standard Deviation
  • Percentile (also requires the percentile specified)

Percentile​

Only shown if the Percentile options has been selected as the aggregation method

The options are:

  • 5
  • 10
  • 25
  • 50
  • 75
  • 90
  • 95

Series Type​

Type of available series config:

  • Auto (automatically generates series based on the provided series key)
  • Manual (manually select which data to extract)

Series Config​

A list of custom series. Only shown if the series type is manual. Has the following properties:

Name​

(optional)

Name of the selected data

Type​

The type of the chart that allows the user to use both bars and lines for different series. Options:

  • bar
  • line

Category Key​

The name of the property to use for determining the bar category.

Value Key​

The name of the property to use for determining the bar value.

Bar Width Key​

(optional)

The name of the property to use for determining the bar width when the type of the chart is Variwide.

Color​

(optional)

fixed color override of the bars of the manual series.

Range Color​

(optional)

Fixed color override of the range of the bars of the manual series.

Sub-filter data​

Standard sub-filter data that determines which data to show which the following methods:

  • "equal"
  • "contains"
  • "between"
  • "lt"
  • "gt"
  • "lte"
  • "gte"
{
  column: {
    key: 'column',
    value: '',
    method: 'equal'
  }
}

More than one sub-filter can be applied at a time.

For example, using the SDD from above and applying the below sub-filter to get the following:

{
  value: {
    key: 'value',
    value: -5,
    method: 'lt'
  }
}

Upper Range Key​

(optional)

The name of the property to use for determining the bar's upper range.

Lower Range Key​

(optional)

The name of the property to use for determining the bar's lower range.

Series Key​

The name of the property to use for determining the series of the bar. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Category Key​

The name of the property to use for determining the category of the bar. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Value Key​

The name of the property to use for determining the value of the bar. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Bar Width Key​

(optional)

The name of the property to use for determining the bar width when the type of the chart is Variwide.

Series Chart Type Key​

(optional)

The key that specifies the type of each series.

Upper Range Key​

The name of the property to use for determining the bar's upper range. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Lower Range Key​

The name of the property to use for determining the bar's lower range. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Override Color Key​

The name of the property to use for determining the category of the bar. Only shown if the data is linked to custom SDD, and the series type is set to Auto.

Sorting​

Column by which to order and order direction: 'asc' or 'desc'. The sum of the specified column values in a category will be used for determining the order of the categorical axis. For example:

{
  column: 'value',
  orderBy: 'asc'
}

Nested Categories​

Boolean value determining if the categories should be nested or not.

Group By Key​

Alphabetical sorting order of the nested categories.

  • Ascending
  • Descending

Group Key​

The name of the property to use for determining the group of the bar. Only shown if the series type is set to Auto.

Example of nested categories:

Display Options​

Support Variwide​

Boolean property indicating if the chart should support variwide type for chart columns. This will require the user to specify the bar width key.

Pan And Zoom​

Enable pan and zoom for numeric axis. To zoom, click and hold the left mouse button. To pan, press the "shift" key and drag on the chart.

Bar Direction​

Select that controls whether bars are rendered horizontally or vertically. The default is for bars to be displayed horizontally.

  • Horizontal (default)
  • Vertical

Bar Outline Style​

Style of the outline of the bats.

  • Dash
  • Dash Dot
  • Dot
  • Long Dash
  • Long Dash Dot
  • Short Dash
  • Short Dash Dot
  • Short Dot
  • Solid (default)
  • None

Stacking​

A select controls whether bars which share a category value in different series are rendered on top of each other ( using the normal stacking method) vs. side by side (none) or percent stacking which automatically calculates the percentage a bar takes in a given category.

  • None
  • Normal
  • Percent

Minimum Height​

The minimum height of the chart in rem units. 2rem by default.

ID Key​

The key that identifies the IDs of the bars.

Titles​

Chart Title​

(optional)

The title text to be displayed above the chart.

Chart Title Alignment​

(Optional)

How the title should be aligned. Supported values:

  • Left
  • Center
  • Right

Chart Subtitle Text​

(optional)

The subtitle text to be displayed above the chart.

Chart Subtitle Alignment​

(Optional)

How the title should be aligned. Supported values:

  • Left
  • Center
  • Right

Tooltips​

Enabled​

Enable or disable tooltips for all data points

Config​

Format for a simple tooltip. Specify a suffix or prefix and set the decimal places.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Column Config​

Construct a custom tooltip by combining data from columns in the source data.

Column​

Column from the data source to display in the tooltip.

Label​

Alias to display instead of the column name.

Apply to all series​

Should this column tooltip be displayed for all series?

Applies To Series​

Which series should this tooltip schema apply to.

Prefix​

Tooltip prefix.

Suffix​

Tooltip suffix.

Is Numeric​

Is the tooltip numeric? If yes, hide the properties related to numeric tooltips.

Multiplier​

Converts the value to the chosen multiplier. For example, the option "Thousands" would convert the value "1000" to "1k".

Decimal Points​

Decimal points to add to the number.

Capitalized multiplier​

Capitalizes the multiplier value.

Locale used​

Should the tooltip be formatted based on user locale?

Data Labels​

Enabled​

Should data labels for the chart series be shown.

Overlap Enabled​

Allow data labels to overlap if there is insufficient space.

Font Size​

Data label font size.

  • Small
  • Medium
  • Large

Config​

Data label configuration.

Column​

Column from the data source to display in the data labels.

Label​

Alias to display instead of the column name.

Apply to all series​

Should this column data label be displayed for all series?

Applies To Series​

Which series should this data label schema apply to.

Prefix​

Data label prefix.

Suffix​

Data label suffix.

Is Numeric​

Is the data label numeric? If yes, hide the properties related to numeric data labels.

Multiplier​

Converts the value to the chosen multiplier. For example, the option "Thousands" would convert the value "1000" to "1k".

Decimal Points​

Decimal points to add to the number.

Capitalized multiplier​

Capitalizes the multiplier value.

Locale used​

Should the data label be formatted based on user locale?

Stack Total Labels​

Enabled​

Should the sum of the stacked data be shown as a label on top of the stack. This is relevant only when stacking is enabled.

Config​

Standard format config for the numeric stack total value. Specify a suffix or prefix and set the decimal places.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Overlap Enabled​

Allow stack total labels to overlap if there is insufficient space.

Font Size​

Stack total label font size.

  • Small
  • Medium
  • Large

Legend​

Enabled​

A flag specifying whether the legend should be displayed in the chart.

Orientation​

(optional)

Defines the way in which legend items are laid out within the available space. Available options:

  • horizontal
  • vertical

Defaults to horizontal

Horizontal legend position​

(optional)

Defines where the legend sits along the horizontal plane. Available options:

  • Left
  • Center
  • Right

Defaults to center

Vertical legend position​

(optional)

Defines where the legend sits along the vertical plane. Available options:

  • top
  • middle
  • bottom

Defaults to bottom

Categorical / Value Axis​

Enabled​

Should the axis values be shown or not.

Title​

(optional)

Title to display on the axis.

Type​

The type of the axis values.

The value axis supports:

  • Linear numeric values that support numeric formatting
  • Logarithmic logarithmic axis values that support numeric formatting

The category axis supports:

  • Numeric numeric values that support numeric formatting
  • Category text values
  • Datetime date values that support date-time formatting based on date-fns library formatting

For date-time type standard conventions can be used. For example the below dates can be formatted with the pattern dd/MM/yyyy:

For more date-time formats please refer to https://date-fns.org/v2.21.1/docs/format.

Tick Format​

Axis value (tick) formatting available if the axis type is numeric.

{
  "prefix": "",
  "suffix": "",
  "multiplier": "auto",
  "decimalPlaces": 1,
  "capitalize": true,
  "useLocale": true
}

Range​

Manually filter Value Axis values to be displayed. Value Axis values are mapped to integers. As an example, use [0,3] to display the first four Value Axis values.

In the case where the creator wishes to specify only an upper or lower range on an axis, the string auto may be supplied for the bound whose value is inconsequential. For instance, an upper bound of 100 on an axis may be specified like so:

[
  "auto",
  100
]

Grid Lines Enabled​

Toggle gridlines for the axis on or off`

Plot Lines​

Display a line perpendicular to the axis. Multiple lines can be displayed. As an example:

[
  {
    "value": 1,
    "width": 3,
    "color": "green",
    "dashStyle": "solid",
    "label": "Limit"
  }
]

Axis On Opposite Side​

Display the axis on the opposite side of the chart.

Reverse​

Reverse axis values.

Tick Rotation Limit​

Limit the rotation of axis ticks (in degrees).

Break Type​

Break the axis in case some values are too large therefore making it hard to read smaller values.

This feature only works when the bars ar not stacked.

Available options are:

  • None
  • Auto Determines the break automatically
  • Manual Add manual breaks

Break From​

The point at which the break should start (only applies to manual breaks).

Break To​

The point at which the break should end (only applies to manual breaks).

Break Size​

The size of the break (only applies to manual breaks). This can be used if the axis labels are not readable and need to have a break between the ticks.

Selection​

Type​

Options for point selection.

  • None (point selection is disabled)
  • Single (one point can be selected at a time)
  • Multi (multiple points can be selected at a time when holding down the shift key)

Selected Points​

Property that the user must like to in order to enabled point selection.

Colored​

Boolean value determining if the selected points should be colored or not.

Selected Point Color​

The color of the selected points.

Animation​

Enabled​

Should animation be enabled or not.

Duration​

Duration of chart animations (400 milliseconds by default).

Caption​

Text​

Specify text to display as a caption below the chart.

Alignment​

Caption alignment

  • left
  • center
  • right

Watermark​

Enabled​

Toggle the watermark on or off. The watermark shows the date and name of a logged-in user.

Text​

Extra text to display in the watermark,